<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',collapsed:false" style="width:202px">
        <div class="con" onselectstart="return false;" style="-moz-user-select:none;">
            <table id="selectgoodsCat"></table>
        </div>
    </div>
    <div data-options="region:'center'">
        <div id="tb<?php echo $uniqid;?>">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td><a href="javascript:void(0);" onclick="selectgoodsReload();" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
                    <td><span style="line-height:30px;"></span>
                        <input id="selectgoodskeywords" style="width:120px" placeholder="按ID、商品名搜索" type="text"
                                           class="easyui-input textbox"></td>
                    <td><a href="javascript:void(0);" onclick="selectgoodsSearch();" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="con"  style="-moz-user-select:none;">
            <table id="selectgoods"></table>
        </div>
    </div>
</div>

<script>
    var selectedGoods = JSON.parse('<?php echo addslashes($selectedGoods);?>');
    var selectgoodsReload = function () {
        $("#selectgoods").datagrid('reload');
    };
    var selectgoodsSearch = function (id) {
        var height = 520 - 96;//表格高度
        var width = 636 - 2;
        $("#selectgoods").datagrid({
            width: width,
            height: height,//高度
            singleSelect: !Boolean(parseInt('<?php echo $multiple;?>')),//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 15,
            pageList: [15, 30, 40, 50],
            method: 'post',
            sortName: 'weigh',
            sortOrder: 'desc',
            url: '/merchant/decorate/selectgoods',
            queryParams: {
                status: 'up',
                category_ids: id,
                keywords: $('#selectgoodskeywords').val(),
            },
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: false,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: true,
            checkOnSelect: true,
            idField: 'id',
            toolbar: '#tb<?php echo $uniqid;?>',
            rowStyler: function (index, row) {
                if (row.status == 'down') {
                    return 'color:#F00;font-style:italic;';
                }
            },
            columns: [[
                {field: 'id', checkbox: true, width: '5%'},
                {
                    field: 'ids',
                    title: 'ID',
                    width: '10%',
                    formatter: function (value, rowData, rowIndex) {
                        return rowData.id;
                    }
                },
                {
                    field: 'title', title: '名称', width: '53%', formatter: function (value, rowData, rowIndex) {
                        return '<div style="display: flex;align-items: center;">' +
                            '<img src="' + rowData.image + '?imageView2/1/w/60/h/60" style="height:30px;width:30px;border-radius: 5px;border:#dfdfdf 1px solid;">'+
                            '<div>' + value + "<br>" + (rowData.is_sku ? '（多规格）' : '') + '</div></div>';
                    }
                },
                {field: 'price', title: '价格', width: '10%', align:'center', sortable: true},
                {field: 'stock', title: '库存', width: '10%', align:'center', sortable: true},
            ]],
            onCheck(rowIndex,rowData) {
                if(selectedGoods.findIndex((item)=>{ return item.id===rowData.id;})===-1) {
                    selectedGoods.push(rowData);
                }
            },
            onCheckAll(rows){
                rows.forEach((it)=>{
                    if(selectedGoods.findIndex((item)=>{ return item.id===it.id;})===-1) {
                        selectedGoods.push(it);
                    }
                });
            },
            onUncheck(rowIndex,rowData) {
                let idx = selectedGoods.findIndex((item)=>{ return item.id===rowData.id;});
                if(idx>-1) {
                    selectedGoods.splice(idx, 1);
                }
            },
            onUncheckAll(rows){
                rows.forEach((it)=>{
                    if(selectedGoods.find((item)=>{ return item.id===it.id;})){
                        selectedGoods.splice(selectedGoods.indexOf(it.id.toString()), 1);
                    }
                });
            },
            onLoadSuccess: function (data) {
                $.each(data.rows,  (i, val)=> {
                    if(selectedGoods.find((item)=>{ return item.id===val.id;})){
                        $('#selectgoods').datagrid('checkRow', i);
                    }
                })
            }
        });
    };

    var selectGoods2 = function () {
        var row = $('#selectgoodsCat').treegrid('getSelected');
        if (row) {
            selectgoodsSearch(row.id);
        }
    };
    var selectgoodsCatSearch = function () {
        var height = 520 - 96;
        var width = 200;
        $("#selectgoodsCat").treegrid({
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: false,//是否显示分页
            pageSize: 10,
            pageList: [10, 15, 20, 25],
            method: 'post',
            idField: 'id',
            treeField: 'name',
            sortName: 'weigh',
            sortOrder: 'desc',
            url: '/merchant/category/index',
            queryParams: {},
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            columns: [[
                {field: 'name', title: '商品分类', width: '95%'},
            ]],
            onClickRow: function (index, field) {
                selectGoods2();
            },
        });
    };

    selectgoodsCatSearch();
    selectgoodsSearch();
    onTreegridResize("#selectgoodsCat");
    onDatagridResize("#selectgoods");

    $('#dodecoratesubmit').click(function(data){
        decorateVm.selectedGoods(selectedGoods);
        $("#dodecoratedlg").dialog('close');
    })
    $('#selectlinksubmit').click(function(){
        let data = $("#selectgoods").datagrid('getSelected');
        if(data){
            let row = JSON.parse(JSON.stringify(linkSelectVm.rowData));
            row.path_name = row.name + '-' + data.title
            row.path += '?id=' + data.id.toString()
            linkSelectVm.rowData = row;
            $("#selectlinkDlg").dialog('close');
        }else{
            $.messager.alert('提示', '请先选择！', 'warning');
        }
    })
</script>
